<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>红包中心 - 社交圈</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    :root {
      --red-primary: #E63946;
      --red-light: #FFE5E7;
      --red-dark: #C1121F;
      --gold: #FFD700;
      --gold-light: #FFF3CD;
      --gray: #6C757D;
      --light-bg: #F8F9FA;
      --white: #FFFFFF;
    }
    
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background-color: var(--light-bg);
      color: #333;
      padding-top: 56px;
      padding-bottom: 60px;
    }
    
    /* 顶部导航 */
    .navbar {
      background-color: var(--red-primary);
      color: white;
      box-shadow: 0 2px 10px rgba(230, 57, 70, 0.3);
    }
    
    .navbar-brand, .nav-link {
      color: white !important;
    }
    
    .navbar-toggler {
      border-color: rgba(255, 255, 255, 0.3);
    }
    
    .navbar-toggler-icon {
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    }
    
    /* 红包余额 */
    .balance-section {
      background: linear-gradient(135deg, var(--red-primary), var(--red-dark));
      color: white;
      padding: 20px 15px;
      text-align: center;
    }
    
    .balance-title {
      font-size: 14px;
      opacity: 0.9;
      margin-bottom: 5px;
    }
    
    .balance-amount {
      font-size: 28px;
      font-weight: 700;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .balance-amount i {
      font-size: 20px;
      margin-right: 5px;
    }
    
    .balance-actions {
      display: flex;
      justify-content: center;
      gap: 15px;
    }
    
    .balance-btn {
      padding: 6px 20px;
      border-radius: 20px;
      font-size: 14px;
      font-weight: 500;
      border: none;
    }
    
    .btn-withdraw {
      background-color: white;
      color: var(--red-primary);
    }
    
    .btn-recharge {
      background-color: rgba(255, 255, 255, 0.2);
      color: white;
    }
    
    /* 红包分类导航 */
    .redpack-tabs {
      display: flex;
      background-color: var(--white);
      border-bottom: 1px solid #eee;
      overflow-x: auto;
    }
    
    .redpack-tab {
      flex: 1;
      padding: 12px 0;
      text-align: center;
      color: var(--gray);
      text-decoration: none;
      font-size: 15px;
      font-weight: 500;
      white-space: nowrap;
      position: relative;
    }
    
    .redpack-tab.active {
      color: var(--red-primary);
    }
    
    .redpack-tab.active::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 3px;
      background-color: var(--red-primary);
    }
    
    /* 红包列表容器 */
    .redpack-container {
      padding: 15px;
    }
    
    .redpack-list {
      display: none;
    }
    
    .redpack-list.active {
      display: block;
    }
    
    /* 红包通用样式 */
    .redpack-item {
      background-color: var(--white);
      border-radius: 12px;
      margin-bottom: 15px;
      overflow: hidden;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
      transition: transform 0.2s;
    }
    
    .redpack-item:hover {
      transform: translateY(-2px);
    }
    
    .redpack-header {
      padding: 12px 15px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .redpack-sender {
      display: flex;
      align-items: center;
    }
    
    .sender-avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      margin-right: 10px;
      object-fit: cover;
    }
    
    .sender-name {
      font-weight: 500;
      font-size: 15px;
    }
    
    .redpack-time {
      font-size: 12px;
      color: var(--gray);
    }
    
    .redpack-content {
      padding: 0 15px 15px;
    }
    
    /* 普通红包样式 */
    .normal-redpack {
      background: linear-gradient(135deg, #FF5252, var(--red-primary));
      color: white;
    }
    
    .normal-redpack .redpack-body {
      display: flex;
      align-items: center;
      padding: 15px;
    }
    
    .redpack-amount {
      font-size: 24px;
      font-weight: 700;
      margin-right: 15px;
    }
    
    .redpack-desc {
      flex: 1;
    }
    
    .redpack-title {
      font-weight: 500;
      margin-bottom: 5px;
    }
    
    .redpack-info {
      font-size: 13px;
      opacity: 0.9;
    }
    
    .redpack-open {
      text-align: center;
      padding: 10px 0;
      background-color: rgba(255, 255, 255, 0.2);
      font-weight: 500;
      cursor: pointer;
    }
    
    /* 拼手气红包样式 */
    .lucky-redpack {
      border: 1px dashed var(--red-primary);
    }
    
    .lucky-redpack .redpack-body {
      padding: 15px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .lucky-left {
      text-align: center;
    }
    
    .lucky-icon {
      color: var(--red-primary);
      font-size: 36px;
      margin-bottom: 5px;
    }
    
    .lucky-text {
      color: var(--red-primary);
      font-weight: 500;
    }
    
    .lucky-right {
      text-align: right;
    }
    
    .lucky-total {
      font-size: 13px;
      color: var(--gray);
      margin-bottom: 3px;
    }
    
    .lucky-count {
      font-weight: 500;
    }
    
    /* 任务红包样式 */
    .task-redpack {
      border-left: 4px solid var(--gold);
    }
    
    .task-redpack .redpack-body {
      padding: 15px;
    }
    
    .task-title {
      font-weight: 600;
      margin-bottom: 8px;
      display: flex;
      align-items: center;
    }
    
    .task-title i {
      color: var(--gold);
      margin-right: 8px;
    }
    
    .task-desc {
      font-size: 14px;
      color: #555;
      margin-bottom: 12px;
      line-height: 1.5;
    }
    
    .task-reward {
      display: inline-block;
      background-color: var(--gold-light);
      color: #856404;
      padding: 3px 10px;
      border-radius: 12px;
      font-size: 13px;
      margin-right: 10px;
    }
    
    .task-action {
      display: inline-block;
      color: var(--red-primary);
      font-weight: 500;
      font-size: 14px;
    }
    
    /* 已领取红包样式 */
    .received-redpack .redpack-body {
      padding: 15px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .received-icon {
      color: var(--red-primary);
      font-size: 24px;
      margin-right: 12px;
    }
    
    .received-info {
      flex: 1;
    }
    
    .received-title {
      font-weight: 500;
      margin-bottom: 3px;
    }
    
    .received-desc {
      font-size: 13px;
      color: var(--gray);
    }
    
    .received-amount {
      font-weight: 700;
      color: var(--red-primary);
    }
    
    /* 红包记录列表 */
    .record-item {
      padding: 12px 15px;
      background-color: var(--white);
      border-radius: 8px;
      margin-bottom: 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .record-info {
      display: flex;
      align-items: center;
    }
    
    .record-icon {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background-color: var(--red-light);
      color: var(--red-primary);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 12px;
    }
    
    .record-icon.income {
      background-color: var(--red-light);
      color: var(--red-primary);
    }
    
    .record-icon.expense {
      background-color: #E8F5E9;
      color: #2E7D32;
    }
    
    .record-details {
      line-height: 1.4;
    }
    
    .record-title {
      font-weight: 500;
      font-size: 15px;
    }
    
    .record-time {
      font-size: 12px;
      color: var(--gray);
    }
    
    .record-amount.income {
      color: var(--red-primary);
      font-weight: 600;
    }
    
    .record-amount.expense {
      color: #2E7D32;
      font-weight: 600;
    }
    
    /* 底部导航 */
    .bottom-nav {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: var(--white);
      display: flex;
      justify-content: space-around;
      padding: 8px 0;
      box-shadow: 0 -1px 4px rgba(0,0,0,0.05);
    }
    
    .nav-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      color: var(--gray);
      font-size: 10px;
      text-decoration: none;
    }
    
    .nav-item i {
      font-size: 20px;
      margin-bottom: 3px;
    }
    
    .nav-item.active {
      color: var(--red-primary);
    }
    
    /* 动画效果 */
    @keyframes shake {
      0%, 100% { transform: rotate(0deg); }
      25% { transform: rotate(-5deg); }
      75% { transform: rotate(5deg); }
    }
    
    .redpack-item.unopened:hover .normal-redpack {
      animation: shake 0.5s ease-in-out infinite;
    }
    
    /* 空状态 */
    .empty-state {
      text-align: center;
      padding: 60px 20px;
      color: var(--gray);
    }
    
    .empty-state i {
      font-size: 60px;
      margin-bottom: 15px;
      color: #eee;
    }
    
    .empty-state p {
      margin-bottom: 20px;
    }
    
    .empty-state .btn {
      background-color: var(--red-primary);
      color: white;
      border: none;
      padding: 8px 20px;
      border-radius: 20px;
    }
  </style>
</head>
<body>
  <!-- 顶部导航 -->
  <nav class="navbar navbar-light fixed-top">
    <div class="container px-3">
      <a class="navbar-brand" href="#">
        <i class="fa fa-envelope-o me-1"></i>红包中心
      </a>
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="#">
            <i class="fa fa-history"></i>
          </a>
        </li>
      </ul>
    </div>
  </nav>
  
  <!-- 红包余额 -->
  <div class="balance-section">
    <div class="balance-title">当前可提现金额</div>
    <div class="balance-amount">
      <i class="fa fa-rmb"></i>
      <span>168.52</span>
    </div>
    <div class="balance-actions">
      <button class="balance-btn btn-withdraw">提现</button>
      <button class="balance-btn btn-recharge">充值</button>
    </div>
  </div>
  
  <!-- 红包分类导航 -->
  <div class="redpack-tabs">
    <a href="#" class="redpack-tab active" data-tab="unopened">未领取</a>
    <a href="#" class="redpack-tab" data-tab="lucky">拼手气</a>
    <a href="#" class="redpack-tab" data-tab="task">任务红包</a>
    <a href="#" class="redpack-tab" data-tab="received">已领取</a>
    <a href="#" class="redpack-tab" data-tab="records">收支记录</a>
  </div>
  
  <!-- 红包列表容器 -->
  <div class="redpack-container">
    <!-- 未领取红包列表 -->
    <div class="redpack-list active" id="unopened">
      <div class="redpack-item unopened">
        <div class="redpack-header">
          <div class="redpack-sender">
            <img src="https://picsum.photos/100/100?random=1" alt="发送者头像" class="sender-avatar">
            <div>
              <div class="sender-name">公司年会红包</div>
            </div>
          </div>
          <div class="redpack-time">刚刚</div>
        </div>
        <div class="normal-redpack">
          <div class="redpack-body">
            <div class="redpack-amount">¥随机</div>
            <div class="redpack-desc">
              <div class="redpack-title">恭喜发财，大吉大利！</div>
              <div class="redpack-info">公司年度福利红包，人人有份</div>
            </div>
          </div>
          <div class="redpack-open">点击领取</div>
        </div>
      </div>
      
      <div class="redpack-item unopened">
        <div class="redpack-header">
          <div class="redpack-sender">
            <img src="https://picsum.photos/100/100?random=2" alt="发送者头像" class="sender-avatar">
            <div>
              <div class="sender-name">好友群组</div>
            </div>
          </div>
          <div class="redpack-time">10分钟前</div>
        </div>
        <div class="normal-redpack">
          <div class="redpack-body">
            <div class="redpack-amount">¥随机</div>
            <div class="redpack-desc">
              <div class="redpack-title">庆祝项目顺利上线</div>
              <div class="redpack-info">老板发福利，速来抢！</div>
            </div>
          </div>
          <div class="redpack-open">点击领取</div>
        </div>
      </div>
      
      <div class="redpack-item unopened">
        <div class="redpack-header">
          <div class="redpack-sender">
            <img src="https://picsum.photos/100/100?random=3" alt="发送者头像" class="sender-avatar">
            <div>
              <div class="sender-name">小明</div>
            </div>
          </div>
          <div class="redpack-time">1小时前</div>
        </div>
        <div class="normal-redpack">
          <div class="redpack-body">
            <div class="redpack-amount">¥随机</div>
            <div class="redpack-desc">
              <div class="redpack-title">生日红包，感谢祝福</div>
              <div class="redpack-info">感谢大家的生日祝福</div>
            </div>
          </div>
          <div class="redpack-open">点击领取</div>
        </div>
      </div>
    </div>
    
    <!-- 拼手气红包列表 -->
    <div class="redpack-list" id="lucky">
      <div class="redpack-item">
        <div class="redpack-header">
          <div class="redpack-sender">
            <img src="https://picsum.photos/100/100?random=10" alt="发送者头像" class="sender-avatar">
            <div>
              <div class="sender-name">部门群</div>
            </div>
          </div>
          <div class="redpack-time">2小时前</div>
        </div>
        <div class="lucky-redpack">
          <div class="redpack-body">
            <div class="lucky-left">
              <div class="lucky-icon">
                <i class="fa fa-trophy"></i>
              </div>
              <div class="lucky-text">拼手气红包</div>
            </div>
            <div class="lucky-right">
              <div class="lucky-total">共10个，总金额¥200</div>
              <div class="lucky-count">还剩3个未领取</div>
            </div>
          </div>
          <div class="redpack-open" style="background-color: var(--red-light); color: var(--red-primary);">
            点击抢红包
          </div>
        </div>
      </div>
      
      <div class="redpack-item">
        <div class="redpack-header">
          <div class="redpack-sender">
            <img src="https://picsum.photos/100/100?random=11" alt="发送者头像" class="sender-avatar">
            <div>
              <div class="sender-name">同学群</div>
            </div>
          </div>
          <div class="redpack-time">昨天</div>
        </div>
        <div class="lucky-redpack">
          <div class="redpack-body">
            <div class="lucky-left">
              <div class="lucky-icon">
                <i class="fa fa-trophy"></i>
              </div>
              <div class="lucky-text">拼手气红包</div>
            </div>
            <div class="lucky-right">
              <div class="lucky-total">共20个，总金额¥500</div>
              <div class="lucky-count">还剩8个未领取</div>
            </div>
          </div>
          <div class="redpack-open" style="background-color: var(--red-light); color: var(--red-primary);">
            点击抢红包
          </div>
        </div>
      </div>
    </div>
    
    <!-- 任务红包列表 -->
    <div class="redpack-list" id="task">
      <div class="redpack-item task-redpack">
        <div class="redpack-header">
          <div class="redpack-sender">
            <img src="https://picsum.photos/100/100?random=20" alt="发送者头像" class="sender-avatar">
            <div>
              <div class="sender-name">平台任务</div>
            </div>
          </div>
          <div class="redpack-time">3小时前</div>
        </div>
        <div class="redpack-body">
          <div class="task-title">
            <i class="fa fa-gift"></i>
            完善个人资料领红包
          </div>
          <div class="task-desc">
            上传头像、填写个人简介并完成3个兴趣标签设置，即可领取红包奖励
          </div>
          <div>
            <span class="task-reward">奖励 ¥3.88</span>
            <span class="task-action">去完成 →</span>
          </div>
        </div>
      </div>
      
      <div class="redpack-item task-redpack">
        <div class="redpack-header">
          <div class="redpack-sender">
            <img src="https://picsum.photos/100/100?random=21" alt="发送者头像" class="sender-avatar">
            <div>
              <div class="sender-name">新用户任务</div>
            </div>
          </div>
          <div class="redpack-time">1天前</div>
        </div>
        <div class="redpack-body">
          <div class="task-title">
            <i class="fa fa-gift"></i>
            邀请好友注册得红包
          </div>
          <div class="task-desc">
            成功邀请1位好友注册并登录，双方均可获得红包奖励，多邀多得
          </div>
          <div>
            <span class="task-reward">奖励 ¥8.88</span>
            <span class="task-action">去邀请 →</span>
          </div>
        </div>
      </div>
      
      <div class="redpack-item task-redpack">
        <div class="redpack-header">
          <div class="redpack-sender">
            <img src="https://picsum.photos/100/100?random=22" alt="发送者头像" class="sender-avatar">
            <div>
              <div class="sender-name">日常任务</div>
            </div>
          </div>
          <div class="redpack-time">2天前</div>
        </div>
        <div class="redpack-body">
          <div class="task-title">
            <i class="fa fa-gift"></i>
            每日签到领红包
          </div>
          <div class="task-desc">
            连续签到7天可获得额外红包奖励，累计签到天数越多，奖励越丰厚
          </div>
          <div>
            <span class="task-reward">奖励 ¥0.5-5.0元</span>
            <span class="task-action">已连续签到3天 →</span>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 已领取红包列表 -->
    <div class="redpack-list" id="received">
      <div class="redpack-item received-redpack">
        <div class="redpack-header">
          <div class="redpack-sender">
            <img src="https://picsum.photos/100/100?random=30" alt="发送者头像" class="sender-avatar">
            <div>
              <div class="sender-name">春节红包</div>
            </div>
          </div>
          <div class="redpack-time">3天前</div>
        </div>
        <div class="redpack-body">
          <div class="received-icon">
            <i class="fa fa-openid"></i>
          </div>
          <div class="received-info">
            <div class="received-title">新年快乐，万事如意</div>
            <div class="received-desc">来自家族群的春节祝福红包</div>
          </div>
          <div class="received-amount">¥16.88</div>
        </div>
      </div>
      
      <div class="redpack-item received-redpack">
        <div class="redpack-header">
          <div class="redpack-sender">
            <img src="https://picsum.photos/100/100?random=31" alt="发送者头像" class="sender-avatar">
            <div>
              <div class="sender-name">同事小王</div>
            </div>
          </div>
          <div class="redpack-time">1周前</div>
        </div>
        <div class="redpack-body">
          <div class="received-icon">
            <i class="fa fa-openid"></i>
          </div>
          <div class="received-info">
            <div class="received-title">感谢帮忙</div>
            <div class="received-desc">感谢帮忙解决问题的小红包</div>
          </div>
          <div class="received-amount">¥8.88</div>
        </div>
      </div>
      
      <div class="redpack-item received-redpack">
        <div class="redpack-header">
          <div class="redpack-sender">
            <img src="https://picsum.photos/100/100?random=32" alt="发送者头像" class="sender-avatar">
            <div>
              <div class="sender-name">平台活动</div>
            </div>
          </div>
          <div class="redpack-time">2周前</div>
        </div>
        <div class="redpack-body">
          <div class="received-icon">
            <i class="fa fa-openid"></i>
          </div>
          <div class="received-info">
            <div class="received-title">签到满30天奖励</div>
            <div class="received-desc">连续签到30天专属红包</div>
          </div>
          <div class="received-amount">¥18.88</div>
        </div>
      </div>
    </div>
    
    <!-- 收支记录列表 -->
    <div class="redpack-list" id="records">
      <div class="record-item">
        <div class="record-info">
          <div class="record-icon income">
            <i class="fa fa-arrow-down"></i>
          </div>
          <div class="record-details">
            <div class="record-title">领取春节红包</div>
            <div class="record-time">今天 09:25</div>
          </div>
        </div>
        <div class="record-amount income">+¥16.88</div>
      </div>
      
      <div class="record-item">
        <div class="record-info">
          <div class="record-icon income">
            <i class="fa fa-arrow-down"></i>
          </div>
          <div class="record-details">
            <div class="record-title">完成日常任务</div>
            <div class="record-time">昨天 18:42</div>
          </div>
        </div>
        <div class="record-amount income">+¥2.50</div>
      </div>
      
      <div class="record-item">
        <div class="record-info">
          <div class="record-icon expense">
            <i class="fa fa-arrow-up"></i>
          </div>
          <div class="record-details">
            <div class="record-title">提现到银行卡</div>
            <div class="record-time">2023-12-30 15:30</div>
          </div>
        </div>
        <div class="record-amount expense">-¥100.00</div>
      </div>
      
      <div class="record-item">
        <div class="record-info">
          <div class="record-icon income">
            <i class="fa fa-arrow-down"></i>
          </div>
          <div class="record-details">
            <div class="record-title">拼手气红包</div>
            <div class="record-time">2023-12-29 11:15</div>
          </div>
        </div>
        <div class="record-amount income">+¥9.66</div>
      </div>
      
      <div class="record-item">
        <div class="record-info">
          <div class="record-icon expense">
            <i class="fa fa-arrow-up"></i>
          </div>
          <div class="record-details">
            <div class="record-title">发红包</div>
            <div class="record-time">2023-12-28 20:45</div>
          </div>
        </div>
        <div class="record-amount expense">-¥50.00</div>
      </div>
    </div>
  </div>
  
  <!-- 空状态 (默认隐藏) -->
  <div class="empty-state" style="display: none;">
    <i class="fa fa-envelope-o"></i>
    <h3>暂无红包</h3>
    <p>快去参与活动或好友互动领取红包吧</p>
    <button class="btn">去发现红包</button>
  </div>
  
  <!-- 底部导航 -->
  <div class="bottom-nav">
    <a href="#" class="nav-item">
      <i class="fa fa-home"></i>
      <span>首页</span>
    </a>
    <a href="#" class="nav-item">
      <i class="fa fa-compass"></i>
      <span>发现</span>
    </a>
    <a href="#" class="nav-item active">
      <i class="fa fa-envelope-o"></i>
      <span>红包</span>
    </a>
    <a href="#" class="nav-item">
      <i class="fa fa-user-o"></i>
      <span>我的</span>
    </a>
  </div>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 红包分类切换
    const tabLinks = document.querySelectorAll('.redpack-tab');
    const tabContents = document.querySelectorAll('.redpack-list');
    
    tabLinks.forEach(tab => {
      tab.addEventListener('click', function(e) {
        e.preventDefault();
        
        // 移除所有标签的active类
        tabLinks.forEach(t => t.classList.remove('active'));
        // 给当前标签添加active类
        this.classList.add('active');
        
        // 隐藏所有内容列表
        tabContents.forEach(content => {
          content.classList.remove('active');
        });
        
        // 显示对应内容列表
        const tabId = this.getAttribute('data-tab');
        document.getElementById(tabId).classList.add('active');
      });
    });
    
    // 红包领取功能
    const openButtons = document.querySelectorAll('.redpack-open');
    openButtons.forEach(button => {
      button.addEventListener('click', function() {
        const redpackItem = this.closest('.redpack-item');
        const senderName = redpackItem.querySelector('.sender-name').textContent;
        
        // 生成随机金额
        const randomAmount = (Math.random() * 9 + 1).toFixed(2);
        
        // 显示领取成功弹窗
        alert(`恭喜！你领取了${senderName}的红包 ¥${randomAmount}`);
        
        // 将红包移动到已领取列表
        if (redpackItem.classList.contains('unopened')) {
          // 克隆红包项
          const clonedItem = redpackItem.cloneNode(true);
          // 修改为已领取样式
          clonedItem.classList.remove('unopened');
          clonedItem.classList.add('received-redpack');
          clonedItem.querySelector('.normal-redpack').outerHTML = `
            <div class="redpack-body">
              <div class="received-icon">
                <i class="fa fa-openid"></i>
              </div>
              <div class="received-info">
                <div class="received-title">${clonedItem.querySelector('.redpack-title').textContent}</div>
                <div class="received-desc">来自${senderName}的红包</div>
              </div>
              <div class="received-amount">¥${randomAmount}</div>
            </div>
          `;
          // 添加到已领取列表
          document.getElementById('received').appendChild(clonedItem);
          // 移除原红包
          redpackItem.remove();
          
          // 如果未领取列表为空，显示空状态
          if (document.querySelectorAll('#unopened .redpack-item').length === 0) {
            document.getElementById('unopened').innerHTML = `
              <div class="empty-state" style="display: block;">
                <i class="fa fa-envelope-o"></i>
                <h3>暂无未领取红包</h3>
                <p>快去参与活动或好友互动领取红包吧</p>
                <button class="btn">去发现红包</button>
              </div>
            `;
          }
        }
      });
    });
    
    // 任务红包完成功能
    const taskActions = document.querySelectorAll('.task-action');
    taskActions.forEach(action => {
      action.addEventListener('click', function() {
        const taskItem = this.closest('.redpack-item');
        const taskTitle = taskItem.querySelector('.task-title').textContent.trim();
        const reward = taskItem.querySelector('.task-reward').textContent;
        
        alert(`任务"${taskTitle}"已完成，获得${reward}红包奖励！`);
        
        // 将任务红包移动到已领取列表
        const clonedItem = taskItem.cloneNode(true);
        clonedItem.classList.remove('task-redpack');
        clonedItem.classList.add('received-redpack');
        clonedItem.querySelector('.redpack-body').outerHTML = `
          <div class="redpack-body">
            <div class="received-icon">
              <i class="fa fa-trophy"></i>
            </div>
            <div class="received-info">
              <div class="received-title">${taskTitle}</div>
              <div class="received-desc">任务完成奖励</div>
            </div>
            <div class="received-amount">${reward.replace('奖励 ', '')}</div>
          </div>
        `;
        document.getElementById('received').appendChild(clonedItem);
        taskItem.remove();
      });
    });
    
    // 提现和充值按钮
    document.querySelector('.btn-withdraw').addEventListener('click', function() {
      alert('提现功能：当前可提现金额 ¥168.52');
    });
    
    document.querySelector('.btn-recharge').addEventListener('click', function() {
      alert('充值功能：支持微信、支付宝等方式充值');
    });
  </script>
</body>
</html>
